<script setup lang="ts">
import type { PropType } from 'vue';

import { ref, watch } from 'vue';

import { useVbenModal } from '@vben/common-ui';
import { IconifyIcon } from '@vben/icons';

import { Input } from 'ant-design-vue';

import { getLocale } from '#/utils/lang';

import langInputModal from './lang-input-modal.vue';

const showLang = ref('');

const lang = defineModel('value', {
  default: undefined,
  type: String as PropType<string | undefined>,
});

const [LangInputModal, modalApi] = useVbenModal({
  connectedComponent: langInputModal,
});

watch(
  () => lang.value,
  (val: string | undefined) => {
    showLang.value = getLocale(val);
  },
);

function modify() {
  modalApi.setData({});
  modalApi.open();
}

function handleSave(data) {
  lang.value = JSON.stringify(data);
}
</script>

<template>
  <Input v-model:value="showLang" disabled>
    <template #addonAfter>
      <a-button @click="modify">
        <div class="flex items-center gap-[4px]">
          <IconifyIcon icon="ant-design:edit-filled" />
        </div>
      </a-button>
    </template>
  </Input>
  <Input v-model:value="lang" v-show="false" />
  <LangInputModal @save="handleSave" :lang="lang" />
</template>

<style lang="scss" scoped>
:deep(.ant-input-group-addon) {
  padding: 0;
  border: none;
}

:deep(.ant-btn-default) {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
</style>
